<template>
  <div class="user_right fl ml20">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的发货单" name="first">
        <div class="order_table c333 mt30 ">
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <colgroup>
                <col width="200">
                <col width="130">
                <col width="150">
                <col width="100">
                <col width="120">
                <col width="100">
            </colgroup>
            <tbody>
              <tr>
                <th class="first">物流单号</th>
                <th>发货类型</th>
                <th>货运公司</th>
                <th>发货时间</th>
                <th class="last">操作</th>
              </tr>
            </tbody>
          </table>
          <div class="center ptb20 mt40" v-if="hasMod">
              <img src="../../../assets/img/mydd.png" alt="">
              <div class="f14 c999 mt10">您还没有相关的订单哦~</div>
          </div>
          <ul class="" v-else>
            <li>
              <router-link to="" class="goA">
                <div class="hd">
                  <img src="~@/assets/img/s201803130433355169.jpg">
                </div>
                <div class="bd">
                    <p class="title">施耐德 Vigi iDPN附件 微型漏电模块附件</p>
                    <p class="price"><em>¥109.70</em>起</p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'rt-shipments',
  metaInfo: {
    title: '我的发货单',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      activeName: 'first',
      hasMod: true
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 38px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #303133;
        position: relative;
        font-size: 18px;
      }
      .el-tabs__item:hover {
        color: #4448f8;
      }
      .el-tabs__active-bar {
        height: 3px;
        background-color: #4448f8;
        width: 110px !important;
        transform: translateX(25px) !important;
      }
    }
    .el-tabs__content {
      color: #333;
      margin-top: 30px;
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        display: table;
        border-collapse: separate;
        border-spacing: 2px;
        border-color: grey;
        th.first {
          border-left: 1px solid #e6e6e6;
        }
        th {
          background: #f8f8f8;
          height: 38px;
          line-height: 38px;
          border: 1px solid #e6e6e6;
          border-left: none;
          border-right: none;
          text-align: center;
        }
        th.last {
          border-right: 1px solid #e6e6e6;
        }
      }
      .ptb20 {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .mt40 {
        margin-top: 40px;
      }
      .center {
        text-align: center;
        .ico_fail {
          background: url('~@/assets/img/fail_ico.png') no-repeat 0 0;
          width: 60px;
          height: 63px;
          display: inline-block;
        }
        p {
          color: #999;
          margin-top: 20px;
          font-size: 14px;
        }
      }
      ul {
        overflow: hidden;
        margin-top: 28px;
        li {
          position: relative;
          float: left;
          width: 162px;
          height: 237px;
          margin-left: 20px;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          .goA {
            display: block;
          }
          .hd {
            height: 160px;
            padding: 10px 0;
            box-sizing: border-box;
            text-align: center;
            img {
              max-width: 100%;
            }
          }
        }
        li:first-child {
        margin-left: 0;
        }
        li:hover {
          border-color: #4448f8;
          display: block;
        }
        li:before {
          position: absolute;
          content: '查看详情';
          width: 100%;
          line-height: 25px;
          left: 0;
          top: 0;
          color: #fff;
          background: red;
          text-align: center;
          background: rgba(68,72,248,.7);
        }
      }
    }
    .c333 {
      color: #333;
    }
    .mt30 {
        margin-top: 30px;
    }
  }
}
.fl {
    float: left;
    display: inline;
}
.c999 {
    color: #999;
}
.f14 {
    font-size: 14px;
}
.mt10 {
    margin-top: 10px;
}

</style>
